<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>故障比例</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
			}

			#acms-list-view {
				padding: 0 15px;
			}
			#acms-list-view > li {
				height: 44px;
				line-height: 44px;
				border-bottom: #e6e6e6 1px solid;
			}
			.acms-msg-1{
				color: #919191;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div class="back-pre-pg top-nav-left icon-arrow-left"></div>
				<div>
					故障比例
				</div>
				<div class="top-nav-right"></div>
			</div>
		</header>
		<div id="list-item-temp" style="display: none;">
			<div class="flex-container flex-center-v flex-between">
				<div class="acms-msg-1">
					--
				</div>
				<div class="acms-msg-2">
					--
				</div>
			</div>
		</div>
		<ul id="acms-list-view"></ul>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript">
		var mListView;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			initView();
			requestCpRtio(api.pageParam.time);
		};
		function initView() {
			mListView = document.getElementById('acms-list-view');
			MyCom.backPrePg();
		}

		function showList(datas) {
			if (datas == null) {
				return;
			}
			var dl = datas.length;
			var i = 0;
			var item;
			var itemHtml = document.getElementById('list-item-temp').innerHTML;
			//将服务器数据转换成ui数据
			var j = 0;
			var bl;
			var data;
			for (; j < dl; j++) {
				data = datas[j];
				bl = parseInt(data.total) / parseInt(data.totalall);
				data.bl = bl.toFixed(2) + '%';
			}
			//listview
			for (; i < dl; i++) {
				item = createLVItem(datas[i], itemHtml);
				mListView.appendChild(item);
			}
		}

		function createLVItem(data, itemHtml) {
			var li = document.createElement('li');
			li.innerHTML = itemHtml;
			var msg_1 = li.getElementsByClassName('acms-msg-1')[0];
			var msg_2 = li.getElementsByClassName('acms-msg-2')[0];
			msg_1.innerText = MyCom.dataFaultTolerant(data.title);
			msg_2.innerText = MyCom.dataFaultTolerant(data.bl);
			return li;
		}

		/**
		 * 服务器请求：获取故障比例
		 * @param{String} time - 请求哪个时间端的数据
		 */
		function requestCpRtio(time) {
			api.showProgress({
			});
			var data = {
				values : {
					'time' : time
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_CP_RATIO;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					var code = re.code;
					if (code == 1) {
						showList(re.list);
						api.hideProgress();
					} else {
						api.hideProgress();
						MyCom.errorTip(2);
					}
				} else {
					api.hideProgress();
					MyCom.errorTip(3);
				}
			});
		}
	</script>
</html>
